<template>
<div>

  <div id="container">

  </div>
</div>
</template>

<script>
import L from "leaflet";
import 'leaflet-rain';
import "proj4leaflet";
import "leaflet/dist/leaflet.css";
import dataLineOne from "@/data/lineOne.js";
import dataLines from "@/data/lines.js";
import { points } from "@/data/points.js";
import {rain} from '@/data/rain'

import '@/data/leaflet-polygon.fillPattern'
import glsl from "glslify";
let map;
export default {
  name: 'App',
  data(){
    return{
      map: null,
      labelGroup: null, //文本图层
      markerLayer: null, //marker 图层
      levelCode: '',
      pointLayer: null,
      migrationLayer: null,
      searchData: null,
      datas: null,
      parentId: '',
      pointList: [],
      centerStation: [],
      stationList: [],
      type: '1',
      treeStation: [],
    }
  },
  mounted(){
    this.initMap()
  },
  methods: {
    initMap(){

       map = L.map("container", {
          center: [23.1791, 113.4644],
          zoom: 13,

      });
       const tileLayerUrl1 = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}'
        const tileLayerUrl2 = 'http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png'
        const tileLayerUrl3 = 'http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png'
        const tileLayerUrl4 = 'http://a.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png'
        L.tileLayer(tileLayerUrl4, {foo: 'bar', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        L.marker([23.1791, 113.4644]).addTo(map);
        this.addRain() // 下雨效果
        this.addBoundary();
        this.addBorderLineText();
    },
// 添加下雨效果
      addRain() {
          var glsl = require('glslify');

          var vertexShader = glsl(["#define GLSLIFY 1\nuniform mat4 u_matrix;\nattribute vec2 a_position;\n\nvoid main() {\n    gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n    gl_PointSize = 10.0;\n}\n"]);
          var fragmentShader = glsl(["precision mediump float;\n#define GLSLIFY 1\nuniform vec2 u_resolution;\nuniform float u_angle;\nuniform float u_width;\nuniform float u_spacing;\nuniform float u_length;\nuniform float u_interval;\nuniform float u_speed;\nuniform float u_time;\nuniform int u_color;\n\nfloat drawCoord(float coord, float fill, float gap) {\n    float patternLength = fill + gap;\n    float modulo = mod(coord, patternLength);\n\n    return step(modulo, patternLength - gap);\n}\n\nvec3 getColor(int color) {\n    float red = float(color / 256 / 256);\n    float green = float(color / 256 - int(red * 256.0));\n    float blue = float(color - int(red * 256.0 * 256.0) - int(green * 256.0));\n\n    return vec3(red / 255.0, green / 255.0, blue / 255.0);\n}\n\nvoid main() {\n    mat2 rotationMatrix = mat2(\n        cos(u_angle), -sin(u_angle),\n        sin(u_angle), cos(u_angle)\n    );\n\n    vec2 rotatedFragCoord = rotationMatrix * gl_FragCoord.xy;\n\n    float yShift = u_time * u_speed;\n    float drawX = drawCoord(rotatedFragCoord.x, u_width, u_spacing);\n    float drawY = drawCoord(rotatedFragCoord.y + yShift, u_length, u_interval);\n\n    float draw = drawX * drawY;\n\n    if (!bool(draw)) discard;\n\n    vec3 color = getColor(u_color);\n\n    gl_FragColor = vec4(color, 1.0);\n}\n"]);
          // 下雨options參數
          let options = {
              angle: 80,
              width: 1,
              spacing: 10,
              length: 4,
              interval: 10,
              speed: 1,
              color: '',
              vertexShader: vertexShader,
              fragmentShader: fragmentShader
          }
          // const newAry = dataLineOne.boundaries.concat(dataLines.boundaries)
          // // 遍历切割成经纬度
          // let  lastAry
          // newAry.flat().forEach(coordinate => {
          //   lastAry = coordinate.split(";").map((ii) => {
          //     const lng = Number(ii.split(",")[0]);
          //     const lat = Number(ii.split(",")[1]);
          //     return [lat,lng];
          //   });
          //
          // });
          var newArray = rain.map(function(subArray) {
              return subArray.map(function(innerArray) {
                  // 交换位置
                  return [innerArray[1], innerArray[0]];
              });
          });
          console.log(newArray,'newary')
          L.rain(newArray ,options).addTo(map)
      },
      // 添加边界线
      addBoundary() {
          let geojson = {
              type: "FeatureCollection",
              features: [],
          };

          let _geojson = JSON.parse(JSON.stringify(geojson));

          for (let item of dataLines.boundaries) {
              geojson.features.push({
                  type: "Feature",
                  geometry: {
                      type: "Polygon",
                      coordinates: [
                          item.split(";").map((ii) => {
                              const lng = Number(ii.split(",")[0]);
                              const lat = Number(ii.split(",")[1]);
                              return [lng, lat];
                          }),
                      ],
                  },
              });
          }

          for (let item of dataLineOne.boundaries) {
              _geojson.features.push({
                  type: "Feature",
                  geometry: {
                      type: "Polygon",
                      coordinates: item.map((i) => {
                          return i.split(";").map((ii) => {
                              const lng = Number(ii.split(",")[0]);
                              const lat = Number(ii.split(",")[1]);
                              return [lng, lat];
                          });
                      }),
                  },
              });
          }

          const onEachFeature = (feature, layer) => {
              if (feature.properties) {
              }
          };

          const styleFunc = (weight) => {
              return {
                  stroke: true, // 边界线
                  color: "#218ef3", // 边界线颜色
                  weight: weight, // 边界线权重
                  opacity: 1, // 边界线透明度

                  fill: true, // 填充
                  fillColor: "#c0def6", // 填充色
                  fillOpacity: 0.3, // 填充透明度
              };
          };

          const vectorCity = L.geoJSON(geojson, {
              onEachFeature,
              style: styleFunc(2),
          });

          const vectorDistrict = L.geoJSON(_geojson, {
              onEachFeature,
              style: styleFunc(1),
          });

          vectorCity.addTo(map);
          vectorDistrict.addTo(map);
      },
      // 加文字标注
      addBorderLineText() {
          const textList = [
              { lon: "113.22765200", lat: "23.09343500", text: "荔湾区" },
              { lon: "113.28093400", lat: "23.13450200", text: "越秀区" },
              { lon: "113.32378000", lat: "23.08267000", text: "海珠区" },
              { lon: "113.37679100", lat: "23.15899700", text: "天河区" },
              { lon: "113.26375900", lat: "23.32304800", text: "白云区" },
              { lon: "113.48057200", lat: "23.10657500", text: "黄埔区" },
              { lon: "113.42796800", lat: "22.98000000", text: "番禺区" },
              { lon: "113.21594600", lat: "23.43880700", text: "花都区" },
              { lon: "113.59021600", lat: "22.71908100", text: "南沙区" },
              { lon: "113.70992900", lat: "23.33455400", text: "增城区" },
              { lon: "113.63494500", lat: "23.61352300", text: "从化区" },
          ];

          textList.map((i) => {
              const myIcon = L.divIcon({
                  html: i.text,
                  className: "my-div-icon",
                  iconSize: [60, 20],
              });
              L.marker([Number(i.lat), Number(i.lon)], {
                  icon: myIcon,
              }).addTo(this.map);
          });
      },
  },

}
</script>

<style>
#container {
  width: 100vw;
  height: 100vh;
  top: 113px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  overflow: hidden;
  outline: none;
  position: absolute;
  z-index: 0;
  background-color: transparent
}
.webgl-canvas{
  //display: none;
}
</style>
